<template>
  <!-- AdmissionList 已签到名单 -->
  <PageContainer>
    <view class="roster-list">
      <Header title="已签到名单" />
      <view class="people-count">
        <text>已签到</text>
        <text class="blue">{{ signTotal }} / {{ passedNum }}</text>
        <text>人</text>
      </view>
      <Paglist v-model="dataList" :is-init-api="false" :parame="parame" @register="register">
        <template v-for="v in dataList" :key="v.id">
          <view :class="['roster-item', v.sysUserId === sysUserId && 'roster-item_attach']">
            <image
              v-if="v.sysUserId === sysUserId"
              class="serve-icon"
              src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/roster-icon-6.png"
              mode="scaleToFill"
            />
            <view class="roster-item_top">
              <view class="top-left">
                <view class="avatar">
                  <Images :src="v.avatar" width="87rpx" height="87rpx" error-img-type="person" />
                </view>
                <!-- <image v-if="v.memberLevel" class="memberlevel-icon" :src="levelItem(v.memberLevel)?.logo" /> -->
              </view>
              <view class="info">
                <view class="info-top">
                  <view class="info-name">{{ v.personName }}</view>
                  <view v-if="v.positionLevel && v.companyPosition" class="unit-position">
                    <!-- <image class="level-icon" :src="`../../../static/icon/roster-icon-${v.positionLevel}.png`" /> -->
                    <text>{{ v.companyPosition }}</text>
                  </view>
                </view>
                <view class="company-name text-overflow-1">{{ v.companyName }}</view>
              </view>
            </view>
            <view class="roster-item_bot">
              <view class="bot-item">
                <image class="bot-icon" src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/roster-icon-7.png" />
                <text>{{ v.seatNum || '暂无排座' }}</text>
              </view>
              <view class="bot-item">
                <image v-if="v.signTime" class="bot-icon" src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/roster-icon-8.png" />
                <text>{{ v.signTime }}</text>
              </view>
            </view>
          </view>
        </template>
      </Paglist>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /**  AdmissionList  已签到名单 */
  import PageContainer from '@/components/PageContainer/index.vue';
  import Header from '@/components/Header/index.vue';
  import { onLoad } from '@/router';
  import { computed, provide, reactive, ref } from 'vue';
  import Paglist from '@/components/Paglist/index.vue';
  import { useConList } from '@/components/Paglist/useConList';
  import Images from '@/components/TImage/index.vue';
  import { getActivitySignRegister } from '@/api/activity';
  import type { ISignRegisterData, ISignRegisterRes } from '@/api/activity/types';
  import { levelDownList } from '@/api/member';
  import type { ILevelDownListRes } from '@/api/member/types';
  import { useUserStoreWithOut } from '@/store/modules/user';

  const useUser = useUserStoreWithOut();
  const sysUserId = computed(() => useUser.userInfo.sysUserId);

  const dataList = ref<ISignRegisterRes[]>([]);
  const parame = reactive<ISignRegisterData>({
    current: 1,
    size: 10,
    activityId: 0,
    sysUserId: undefined,
  });

  const activityStatus = ref();
  const signTotal = ref<number>(0);
  const passedNum = ref<number>();
  provide('api', async (obj: ISignRegisterData) => {
    const res = await getActivitySignRegister(obj);
    signTotal.value = res.total;
    return res;
  });

  provide('tabIsShow', false);

  const [register, { refresh }] = useConList();

  const levelList = ref<ILevelDownListRes[]>([]);
  const levelItem = (level: number) => levelList.value.find((v) => v.id === level);

  onLoad<'AdmissionList'>((op) => {
    passedNum.value = op.passedNum;
    parame.activityId = op.activityId;
    getActivitySignRegister({ activityId: op.activityId }).then((r) => {
      activityStatus.value = r.activityStatus;
      parame.sysUserId = r.sysUserId;
      refresh?.();
    });
    levelDownList().then((r) => (levelList.value = r));
  });
</script>

<style lang="scss" scoped>
  .roster {
    &-list {
      padding: 30rpx 38rpx;
    }
    &-item {
      margin-bottom: 30rpx;
      height: 192rpx;
      background: #ffffff;
      border-radius: 19rpx;
      padding: 0 25rpx;
      display: flex;
      align-items: center;
      flex-direction: column;
      border: 1px solid transparent;
      &_top {
        width: 100%;
        flex: 1;
        display: flex;
        align-items: center;

        .top-left {
          position: relative;
          margin-right: 30rpx;
          flex-shrink: 0;
          width: 87rpx;
          height: 87rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          .avatar {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            overflow: hidden;
          }
          .memberlevel-icon {
            width: 100rpx;
            height: 28rpx;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: -6rpx;
            z-index: 9;
          }
        }

        .info {
          color: #333;
          font-size: 23rpx;
          flex: 1;
          .info-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 25rpx;
            .info-name {
              font-size: 27rpx;
              font-weight: bolder;
            }
            .unit-position {
              display: flex;
              align-items: center;
              .level-icon {
                width: 25rpx;
                height: 25rpx;
                margin-right: 6rpx;
              }
            }
          }
        }
      }
      &_bot {
        width: 100%;
        height: 56rpx;
        border-top: 1px solid #dddddd;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .bot-item {
          color: #333;
          font-size: 23rpx;
          display: flex;
          align-items: center;
          .bot-icon {
            width: 28rpx;
            height: 28rpx;
            margin-right: 10rpx;
          }
        }
      }
    }
    &-item_attach {
      border: 1px solid #ef823a;
      position: relative;
      .serve-icon {
        width: 94rpx;
        height: 94rpx;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 9;
      }
    }
  }

  .people-count {
    font-size: 28rpx;
    color: #333;
    font-weight: bolder;
    margin-bottom: 30rpx;
    .blue {
      padding: 0 12rpx;
      color: #2878FF;
    }
  }
</style>
